<script lang="ts" setup>
import { onMounted } from 'vue';

import { Page } from '@vben/common-ui';

import { Card, message, Select, SelectOption } from 'ant-design-vue';
import { $t } from '@vben/locales';
import { useVbenForm } from '#/adapter/form';
import { getSettingStorage, putSettingStorage } from '#/api/admin/setting';

defineOptions({
  name: 'AdminStorage',
});

const storages = ref({ Local: { name: '本地' } });
const [Form, formApi] = useVbenForm({
  handleSubmit: onSubmit,
  commonConfig: {
    labelWidth: 100,
  },
  schema: [
    {
      component: 'Select',
      defaultValue: 1,

      fieldName: 'type',
      label: $t('admin.storageType'),
    },
  ],
  resetButtonOptions: { show: false },
  actionWrapperClass: 'text-center',
});


const onSearch = async () => {
  // 从 API 获取设置数据
  const {
    data: { setting },
  } = await getSettingStorage();
  storages.value = setting.storages;
  // 更新表单值
  formApi.setValues(setting);
};

async function onSubmit(values: Record<string, any>) {
  const { msg } = await putSettingStorage(values);
  message.success({
    content: msg,
  });
}

onMounted(() => {
  onSearch();
});
</script>

<template>
  <Page>
    <Card>
      <Form>
        <template #type="slotProps">
          <Select
            v-bind="slotProps"
            placeholder="请选择存储类型"
            style="width: 180px"
          >
            <SelectOption
              v-for="(item, index) in storages"
              :key="index"
              :label="item.name"
              :value="index"
            />
          </Select>
        </template>
      </Form>
    </Card>
  </Page>
</template>
